<template>
  <div class="app-container">
    <!--侧边行政区域数据-->
    <el-col :xs="9" :sm="6" :md="4" :lg="4" :xl="4" style="height: 800px">
      <div class="head-container">
        <el-input
          style="width: 160px"
          v-model="filterText"
          clearable
          size="normal"
          placeholder="行政区域名搜索"
          prefix-icon="el-icon-search"
          class="filter-item"
          @input="getJ_Areas"
        />
      </div>
      <el-tree ref="tree" :filter-node-method="filterNode" :data="j_areas" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" size="small" clearable placeholder="输入经办机构名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="机构编码" prop="agencode">
          <el-input v-model="form.agencode" style="width: 345px;" type="textarea"/>
        </el-form-item>
        <el-form-item label="机构名称" prop="agenname">
          <el-input v-model="form.agenname" style="width: 345px;" type="textarea"/>
        </el-form-item>
        <el-form-item label="机构级别" prop="grade">
          <el-input-number v-model.number="form.grade" :min="1" controls-position="right" style="width: 145px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--el-row覆盖了el-tree导致el-tree无法点击-->
    <el-row :gutter="20" style="margin-left: 180px">
      <!--行政区域管理-->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px;margin-left: -20px; width: 870px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">农合经办机构列表</span>
          </div>
          <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler">
            <el-table-column :selectable="checkboxT" type="selection" width="55" />
            <el-table-column v-if="columns.visible('agencode')" prop="agencode" label="经办机构编码" />
            <el-table-column v-if="columns.visible('agenname')" prop="agenname" label="经办机构名称" />
            <el-table-column v-if="columns.visible('grade')" prop="grade" label="经办机构级别" />
            <el-table-column v-permission="['admin','nonghe:edit','nonghe:del']" label="操作" width="130px" align="center" fixed="right">
              <template slot-scope="scope">
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudNongHe from '@/api/system/nonghe'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { getJ_areasTree } from "@/api/common/j_area";

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '农合经办机构', url: 'api/nonghe', crudMethod: { ...crudNongHe }})
  const defaultForm = { id: null, agencode: null, agenname: null, grade: null, permission: null }
  export default {
    components: {Treeselect, pagination, crudOperation, rrOperation, udOperation},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        filterText: '',
        areaname: '',  areaDatas: [], policys: [],
        currentId: 0, menuLoading: false, showButton: false,
        permission: {
          add: ['admin', 'nonghe:add'],
          edit: ['admin', 'nonghe:edit'],
          del: ['admin', 'nonghe:del']
        },
        rules: {
          agencode: [
            {required: true, message: '请输入农合经办机构编码', trigger: 'blur'}
          ],
          agenname: [
            {required: true, message: '请输入农合经办机构名称', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '请输入农合经办机构级别', trigger: 'blur'}
          ]
        },
        j_areas: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    created() {
      this.$nextTick(() => {
        this.getJ_Areas()
        this.crud.toQuery()
      })
    },
    methods: {
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud)
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud)
      },
      // 改变数据
      update() {
        // 无刷新更新 表格数据
        crudNongHe.get(this.currentId).then(res => {
          for (let i = 0; i < this.crud.data.length; i++) {
            if (res.id === this.crud.data[i].id) {
              this.crud.data[i] = res
              break
            }
          }
        })
      },
      // 切换
      handleNodeClick(data) {
        if (data.pid === 0) {
          this.query.j_area.id = null
        } else {
          this.query.j_area.id = data.id
        }
        this.crud.toQuery()
      },
      checkboxT(row, rowIndex) {
        return row.id !== this.rowIndex
      },
      //tree
      getJ_Areas() {
        getJ_areasTree().then(res => {
          if (res) {
            this.j_areas = res
            console.log(this.j_areas)
          }
        })
      },
      /*value 是传进来的val值 data是json数组中的一项*/
      filterNode(value, data) {
        if (!value) return true;
        /*如果下标不等于-1说明有值 label是自定义显示的值*/
        return data.label.indexOf(value) !== -1;
      },
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .role-span {
    font-weight: bold;color: #303133;
    font-size: 15px;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
